<template>
    <div class="bigbox">
        <ETable :delelteAll="delHouseTypeAll" :delelte="delHouseType" :columns="columns"  :loadData="getHouseType" :isSearch="false"  :isPage="true" :pageSize="[10,20,30]" ref="table" >

          <template #buttons="{delAll}">
            <el-button type="success" @click="add">新增房间类型</el-button>
            <el-button type="danger" @click="delAll">批量删除 </el-button>
          </template>

          <template #operation="{row,del}">
        
            <el-button type="primary" @click="EDITOR(row.id,row.name)">编辑</el-button>
            <el-button type="danger" @click="del(row.id)">删除 </el-button>

          </template>
     
        </ETable>

        <el-dialog v-model="open" title="编辑房型">
        <el-form>
          <el-form-item label="房型名称">
            <el-input v-model="form.name" placeholder="请输入房型名称"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="open = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup lang="ts">

  import ElMessage from 'element-plus/es/components/message/index.mjs';
import  { delHouseType, getHouseType,addHouseType,editHouseType ,delHouseTypeAll} from '../../apis/HouseType/HouseType';
  import ETable, { type ColumnType } from '../../components/ETable.vue';
  import { reactive, ref, useTemplateRef} from 'vue';

  const EDITOR=(id:number,name:string)=>{
    open.value=true
    form.id=id
    form.name=name
 console.log(id,name);
}

const table=useTemplateRef('table')
const open = ref(false)
const add=()=>{
  open.value=true
}
const form = reactive({
    id: 0,
    name: '',
  })

const submit=()=>{
    if(form.id==0){
        addHouseType(form).then(res=>{
            console.log(res);
            ElMessage('添加成功')
            table.value!.getData()
        })
        open.value=false
        form.name=''
    }else{
        editHouseType(form).then(res=>{
            console.log(res);
            ElMessage('修改成功')
            table.value!.getData()
        })
        open.value=false
        form.name=''
        
    }
  
 
}

  


  const columns= reactive<ColumnType[]>([
  {
    prop: 'id',
    label: '序号',
    width: '',
  },
  {
    prop: 'name',
    label: '房间号',
    width: '',
  },
  {
    prop: 'operation',
    label: '操作',
    slot: true,
    width: '',
  },
  ])
  
  </script>
  
  <style scoped>
  .search_top2{
    margin-left: 10px;
    margin-top: 10px;
  }
  .search_top{
    width: 200px;
    display: inline-block;
  }
  .search{
    width: 100%;
    height: 100px;
    background-color: #fff;
    overflow: hidden;
  }
/* .bigbox{
  background-color: #fff;
  padding: 10px;
  margin-top: 20px;
} */
  </style>